<!DOCTYPE html>
<html>
    <head>
        <title>welle-io web</title>
        <meta charset="UTF-8">
<style>
body {
    background-color: linen;
    font-family: Verdana, sans-serif;
    font-size: 8pt;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;
}
th#dls {
     width: 300px;
}
table#servicetable tr:nth-child(even) {
    background-color: #eee;
}
table#servicetable tr:nth-child(odd) {
    background-color: linen;
}
table#servicetable th {
    color: white;
    background-color: #444;
}
button {
    background-color: #F44336;
    border: none;
    color: white;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 7pt;
    border-radius: 4px;
}
canvas {
    border: 1px solid #d3d3d3;
}
.chevron {
    height: 24px;
    width: 24px;
    display: inline-block;
    float: left;
}
.slide-modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9);
}
.slide-modal-content {
    margin: auto;
    display: block;
    max-width: 700px;
}
#slidecaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
.slideclose {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.slideclose:hover,
.slideclose:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
</style>
    </head>
    <body>
        <div>
            <div>
                Channel: <select id="channelselector" name="channel"></select>
                FFT Placement: <select id="fftwindowselector" name="fftwindow"></select>
                Coarse freq corrector: <input type="checkbox" id="coarsecheckbox">
            </div>
            <div id="ensembleinfo"></div>

            <div id="block_spectrum" class="block_graph">
                <div class="title"><div class="chevron"></div><h2>Spectrum</h2></div>
                <div class="data" style="display: none"><canvas width="512" height="150" id="spectrum"></canvas></div>
            </div>

            <div id="block_cir" class="block_graph">
                <div class="title"><div class="chevron"></div><h2>CIR</h2></div>
                <div class="data" style="display: none"><canvas id="cir" width="512" height="150"
                    style="position: relative; left: 0; top: 0; z-index: 0;">
                </canvas><canvas id="cirpeaks" width="512" height="150"
                    style="position: relative; left: -514px; top: 0; z-index: 1;"></canvas></div>
            </div>

            <div id="block_constellation" class="block_graph">
                <div class="title"><div class="chevron"></div><h2>Constellation</h2></div>
                <div class="data" style="display: none"><canvas width="300" height="180" id="constellation"></canvas></div>
            </div>

            <div id="block_tii" class="block_graph">
                <div class="title"><div class="chevron"></div><h2>TII Info</h2></div>
                <div class="data" style="display: none" id="tiiinfo"></div>
            </div>

        </div>
        <div>
            <audio id="player">
                <!--<source src="/mp3/0x4f57" type="audio/mpeg"> -->
            </audio>
        </div>
        <div id="mySlideModal" class="slide-modal">
            <span class="slideclose">&times;</span>
            <img class="slide-modal-content" id="slideimg">
            <div id="slidecaption"></div>
        </div>

        <script type="text/javascript" src="/index.js"></script>
    </body>
</html>
